<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面包工坊 - 新鲜美味的面包网上商城</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div id="app">
    <!-- 登录模态框 -->
    <div class="modal" id="loginModal" v-show="showLogin">
        <div class="modal-content">
            <span class="close" @click="closeLoginModal">&times;</span>
            <h2>用户登录</h2>
            <form @submit.prevent="handleLogin">
                <div class="form-group">
                    <label for="loginUsername">用户名</label>
                    <input type="text" v-model="loginForm.username" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" v-model="loginForm.password" required>
                </div>
                <div class="form-footer">
                    <button class="btn-primary" @click="login">登录</button>
                    <p>还没有账号？<a href="#" @click="showRegisterModal">立即注册</a></p>
                </div>
            </form>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div class="modal" id="registerModal" v-show="showRegister">
        <div class="modal-content">
            <span class="close" @click="closeRegisterModal">&times;</span>
            <h2>用户注册</h2>
            <form @submit.prevent="handleRegister">
                <div class="form-group">
                    <label for="regUsername">用户名</label>
                    <input type="text" v-model="registerForm.username" required>
                </div>
                <div class="form-group">
                    <label for="regEmail">邮箱</label>
                    <div class="email-verify">
                        <input type="email" v-model="registerForm.email" required>
                        <button type="button" 
                                class="btn-verify" 
                                @click="sendVerifyCode" 
                                :disabled="cooldown > 0">
                            {{ cooldown > 0 ? `${cooldown}s后重新发送` : '获取验证码' }}
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="regVerifyCode">验证码</label>
                    <input type="text" 
                           v-model="registerForm.verifyCode" 
                           maxlength="6" 
                           required 
                           placeholder="请输入邮箱验证码">
                </div>
                <div class="form-group">
                    <label for="regPassword">密码</label>
                    <input type="password" v-model="registerForm.password" required>
                    <div class="password-strength" v-if="registerForm.password">
                        <div class="strength-bar">
                            <div :class="['strength-level', passwordStrength]"></div>
                        </div>
                        <span class="strength-text">{{ passwordStrengthText }}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="regConfirmPassword">确认密码</label>
                    <input type="password" v-model="registerForm.confirmPassword" required>
                    <span class="error-message" v-if="passwordMismatch">两次输入的密码不一致</span>
                </div>
                <div class="form-footer">
                    <button type="submit" class="btn-primary">注册</button>
                    <p>已有账号？<a href="#" @click="showLoginModal">立即登录</a></p>
                </div>
            </form>
        </div>
    </div>


    <!-- 头部导航 -->
    <header class="header">
        <div class="container">
            <div class="logo">
                <h1>面包工坊</h1>
            </div>
            <div class="search-box">
                <input type="text" placeholder="搜索商品...">
                <button><i class="fas fa-search"></i></button>
            </div>
            <nav class="nav">
                <ul>
                    <li><a href="index.html" class="active">首页</a></li>
                    <li><a href="pages/products.html">全部商品</a></li>
                    <li><a href="cart.html">
                        <i class="fas fa-shopping-cart"></i> 
                        购物车
                        <span class="cart-count">0</span>
                    </a></li>
                    <li class="user-menu">
                        <a href="#" id="userBtn">
                            <i class="fas fa-user"></i> 
                            <span class="user-text">登录/注册</span>
                        </a>
                        <div class="dropdown-menu">
                            <div class="guest-menu">
                                <a href="#" id="loginBtn" @click="showLoginModal"><i class="fas fa-sign-in-alt"></i> 登录</a>
                                <a href="#" id="registerBtn" @click="showRegisterModal"><i class="fas fa-user-plus"></i> 注册</a>
                            </div>
                            <div class="user-menu-logged" style="display: none;">
                                <a href="user.html"><i class="fas fa-user-circle"></i> 个人中心</a>
                                <a href="orders.html"><i class="fas fa-clipboard-list"></i> 我的订单</a>
                                <a href="favorites.html"><i class="fas fa-heart"></i> 我的收藏</a>
                                <a href="#" id="logoutBtn"><i class="fas fa-sign-out-alt"></i> 退出登录</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main>
        <!-- 轮播图 -->
        <section class="slider">
            <div class="slider-container">
                <div class="slide">
                    <img src="assets/img/bg/banner1.png" alt="新鲜面包">
                    <div class="slide-content">
                        <h2>新鲜出炉</h2>
                        <p>每天现烤，口感新鲜</p>
                        <button class="btn-primary">立即购买</button>
                    </div>
                </div>
                <div class="slide">
                    <img src="assets/img/bg/banner2.png" alt="特惠活动">
                    <div class="slide-content">
                        <h2>限时特惠</h2>
                        <p>全场满50减20</p>
                        <button class="btn-primary">查看详情</button>
                    </div>
                </div>
                <div class="slide">
                    <img src="assets/img/bg/banner3.png" alt="新品上市">
                    <div class="slide-content">
                        <h2>新品上市</h2>
                        <p>多款新品等你来尝</p>
                        <button class="btn-primary">了解更多</button>
                    </div>
                </div>
                <button class="slider-btn prev"><i class="fas fa-chevron-left"></i></button>
                <button class="slider-btn next"><i class="fas fa-chevron-right"></i></button>
                <div class="slider-dots"></div>
            </div>
        </section>

        <!-- 快速分类 -->
        <section class="quick-categories">
            <div class="container">
                <div class="category-list">
                    <div class="category-item">
                        <i class="fas fa-bread-slice"></i>
                        <span>欧式面包</span>
                    </div>
                    <div class="category-item">
                        <i class="fas fa-cookie"></i>
                        <span>甜点面包</span>
                    </div>
                    <div class="category-item">
                        <i class="fas fa-birthday-cake"></i>
                        <span>蛋糕面包</span>
                    </div>
                    <div class="category-item">
                        <i class="fas fa-coffee"></i>
                        <span>咖啡搭配</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 热销商品 -->
        <section class="hot-products">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">热销商品</h2>
                    <div class="section-tabs">
                        <button class="tab active">全部</button>
                        <button class="tab">新品</button>
                        <button class="tab">特惠</button>
                        <button class="tab">热卖</button>
                    </div>
                </div>
                <div class="product-grid">
                    <!-- 商品卡片 -->
                    <div class="product-card">
                        <div class="product-badges">
                            <span class="badge new">新品</span>
                            <span class="badge discount">-20%</span>
                        </div>
                        <div class="product-img">
                            <img src="../assets/img/products/bread1.jpg" alt="法式长棍">
                            <div class="product-actions">
                                <button class="btn-action add-to-cart">
                                    <i class="fas fa-shopping-cart"></i>
                                </button>
                                <button class="btn-action">
                                    <i class="far fa-heart"></i>
                                </button>
                            </div>
                        </div>
                        <div class="product-info">
                            <h3>法式长棍面包</h3>
                            <div class="product-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                                <span>(32)</span>
                            </div>
                            <div class="price">
                                <span class="current">¥12.9</span>
                                <span class="original">¥15.9</span>
                            </div>
                            <button class="btn-buy">立即购买</button>
                        </div>
                    </div>
                    <!-- 更多商品卡片... -->
                </div>
            </div>
        </section>

        <!-- 特色服务 -->
        <section class="features">
            <div class="container">
                <div class="feature-grid">
                    <div class="feature-item">
                        <i class="fas fa-truck"></i>
                        <h3>全城配送</h3>
                        <p>市区2小时送达</p>
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-undo"></i>
                        <h3>无忧退换</h3>
                        <p>7天无理由退换</p>
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-shield-alt"></i>
                        <h3>品质保证</h3>
                        <p>正品保障</p>
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-headset"></i>
                        <h3>贴心服务</h3>
                        <p>24小时在线客服</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>关于我们</h3>
                    <p>面包工坊致力于为您提供最新鲜美味的面包</p>
                </div>
                <div class="footer-section">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">全部商品</a></li>
                        <li><a href="#">购物车</a></li>
                        <li><a href="#">个人中心</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>联系我们</h3>
                    <p><i class="fas fa-phone"></i> 400-123-4567</p>
                    <p><i class="fas fa-envelope"></i> service@breadshop.com</p>
                </div>
                <div class="footer-section">
                    <h3>关注我们</h3>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>© 2024 面包工坊 版权所有</p>
            </div>
        </div>
    </footer>
</div>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/vue.js"></script>
    <script src="assets/js/axios.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                isLoggedIn: false,
                showLogin: false,
                showRegister: false,
                currentUser: null,
                loginForm: {
                    username: '',
                    password: ''
                },
                registerForm: {
                    username: '',
                    email: '',
                    password: '',
                    confirmPassword: ''
                },
                cooldown: 0,
                passwordStrength: '',
                passwordStrengthText: '',
                passwordMismatch: false
            },
            methods: {
                showLoginModal() {
                    this.showLogin = true;
                    this.showRegister = false;
                },
                showRegisterModal() {
                    this.showRegister = true;
                    this.showLogin = false;
                },
                closeLoginModal() {
                    this.showLogin = false;
                },
                closeRegisterModal() {
                    this.showRegister = false;
                },
                login() {
                    // 这里添加登录逻辑
                    this.isLoggedIn = true;
                    this.currentUser = username;
                    this.showLogin = false;
                    localStorage.setItem('currentUser', username);
                    let params = new URLSearchParams(this.loginForm)
                    axios.post("").then(response=>)
                },
                logout() {
                    this.isLoggedIn = false;
                    this.currentUser = null;
                    localStorage.removeItem('currentUser');
                },
                handleLogin() {
                    // 这里添加登录验证逻辑
                    this.login(this.loginForm.username, this.loginForm.password);
                    // 清空表单
                    this.loginForm.username = '';
                    this.loginForm.password = '';
                },
                handleRegister() {
                    if (this.registerForm.password !== this.registerForm.confirmPassword) {
                        alert('两次输入的密码不一致');
                        return;
                    }
                    // 这里添加注册逻辑
                    console.log('注册:', this.registerForm);
                    this.showRegister = false;
                    this.showLogin = true;
                    // 清空表单
                    Object.keys(this.registerForm).forEach(key => {
                        this.registerForm[key] = '';
                    });
                },
                sendVerifyCode() {
                    // 这里添加发送验证码的逻辑
                    this.cooldown = 60;
                    // 启动倒计时
                    const timer = setInterval(() => {
                        this.cooldown--;
                        if (this.cooldown <= 0) {
                            clearInterval(timer);
                        }
                    }, 1000);
                }
            },
            mounted() {
                // 检查登录状态
                const savedUser = localStorage.getItem('currentUser');
                if (savedUser) {
                    this.isLoggedIn = true;
                    this.currentUser = savedUser;
                }
            }
        });

    </script>
</body>
</html> 